<template>
  <div class="tpl15-head">
    <section class="mobile15-header-top">
      <img :src="tplItemData.bg">
      <section class="mobile15-headerbot-le">
        <img :src="tplItemData.photo" mode="scaleToFill">
      </section>
      <b class="j-shopTitle">{{shopTitle}}</b>
    </section>
    <section class="mobile15-headerbot">
      <section class="mobile15_headerbot_ri">
        <ul >
          <li v-for="(item,index) in tplItemData.datasets" :key="index">
            <span v-if="index==0&&item.initialize==1">{{tplItemData.itemNum}}</span>
            <span v-else-if="index==1&&item.initialize==1">{{tplItemData.newItemNum}}</span>
            <span v-else-if="index==2&&item.initialize==1">
              <img :src="item.logo" mode="scaleToFill">
            </span>
            <span v-else-if="index==3&&item.initialize==1">
              <img :src="item.logo" mode="scaleToFill">
            </span>
            <span v-else>
              <img :src="item.pic" mode="scaleToFill">
            </span>
             <a @click="openLink(item.link)" :style="{'color':item.titleColor}">{{item.showtitle}}</a>
          </li>
        </ul>
      </section>
    </section>
    <section class="mobile15-nav">
      <ul>
        <li class="nav-img" v-for="(row,index) in tplItemData.dataset" :key="index">
          <img :src="row.pic" width="83" height="120"/>
          <a @click="openLink(row.link)">
            <span>{{row.showtitle}}</span>
            <i>{{row.englishtitle}}</i>
          </a>
        </li>
      </ul>
    </section>
  </div>
</template>

<script>
import Vue from 'vue'
import { openPage } from '@/utils/utils'
import { mapGetters } from 'vuex'
export default Vue.extend({
  props: {
    tplItemData: {
      type: Object // 传入参数的类型
    },
    shopTitle: {
      type: String,
      default: ''
    }
  },
  computed: {
    ...mapGetters(['wxConfig'])
  },
  methods: {
    // TODO 小程序跳转
    openLink(link) {
        openPage(link)
    },
  }
})
</script>

<style lang="scss">
.tpl15-head{
  .mobile15-header-top{
    width: 100%;
    height: auto;
    overflow: hidden;
    position:relative;
    // border-bottom: #04153c solid 8px;
    img{
      width: 100%;
      display: block;
    }
    b{
      position: absolute;
      top: 180px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 26px;
      color: #fff;
    }
    .mobile15-headerbot-le{
      position: absolute;
      top: 30px;
      left: 50%;
      transform: translateX(-50%);
      width: 130px;
      height: 130px;
      padding: 4px;
      background: #fff;
      border-radius: 50%;
      overflow: hidden;
      box-sizing:content-box;
      img{
        border-radius: 50%;
      }
    }
  }
  .mobile15-headerbot{
    width: 100%;
    height: 88px;
    position: relative;
    margin-top: 10px;
    .mobile15_headerbot_ri{
      ul {
        li{
          float: left;
          width: 25%;
          text-align: center;
          overflow: hidden;
          background: url(https://img.wifenxiao.com/h5-wfx/images/diy/tpl7/header3.jpg) no-repeat right;
          background-size:2px 54px;
          &:last-child{
              background:transparent;
          }
          span{
            display: block;
            height: 36px;
            line-height: 34px;
            color: #a88c5c;
            margin-top: 4px;
            font-size: 28px;
            img{
              display:block;
              width:32px;
              height:32px;
              margin:0 auto;
            }
          }
          a{
            display: block;
            color: #404040;
            line-height: 36px;
            margin-top: 4px;
          }
        }
      }
    }
    
  }
  .mobile15-nav{
    width: 96%;
    padding: 0 2%;
    overflow: hidden;
    margin-top: 12px;
    overflow: hidden;
    ul{
      display: flex;
      justify-content: space-between;
      .nav-img {
        width: 24%;
        min-height: 110px;
        position: relative;
        img{
          width: 100%;
        }
        a {
          width: 100%;
          position: absolute;
          bottom: 9%;
          left: 0;
          display: block;
          color: #fff;
          font-size: 28px;
          span {
            display: block;
            padding: 10px 10px 0;
          }
           i {
            font-style: normal;
            font-size: 24px;
            display: block;
            padding: 10px;
          }
        }
      }
    }
  }
}
</style>
